<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>交易查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <div class="d-flex">
    <nav class="flex-column bg-primary text-white p-3" style="width: 220px; height: 100vh;">
      <h4>客户中心</h4>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="/customer/dashboard" class="nav-link text-white">首页</a></li>
        <li class="nav-item"><a href="/customer/balance" class="nav-link text-white">余额查询</a></li>
        <li class="nav-item"><a href="/customer/transactions" class="nav-link text-white active">交易查询</a></li>
        <li class="nav-item"><a href="/customer/deposit" class="nav-link text-white">存款</a></li>
        <li class="nav-item"><a href="/customer/withdraw" class="nav-link text-white">取款</a></li>
        <li class="nav-item"><a href="/customer/report_loss" class="nav-link text-white">挂失</a></li>
        <li class="nav-item"><a href="/customer/change_password" class="nav-link text-white">修改密码</a></li>
      </ul>
    </nav>
    <main class="flex-fill p-4">
      <h3>交易查询</h3>
      <button class="btn btn-info mb-2" data-bs-toggle="modal" data-bs-target="#transModal">查询交易</button>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>交易时间</th>
            <th>交易类型</th>
            <th>交易金额</th>
            <th>卡号</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody id="transactions-tbody"></tbody>
      </table>
    </main>
  </div>
  <!-- 交易查询 Modal -->
  <div class="modal fade" id="transModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="transForm">
          <div class="modal-header">
            <h5 class="modal-title">交易查询</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="text" class="form-control mb-2" id="transCardID" placeholder="请输入银行卡号">
            <input type="date" class="form-control mb-2" id="transStartDate" placeholder="起始日期">
            <input type="date" class="form-control mb-2" id="transEndDate" placeholder="结束日期">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">查询</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="/static/js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  document.getElementById('transForm').onsubmit = async function(e) {
    e.preventDefault();
    const cardID = document.getElementById('transCardID').value;
    const startDate = document.getElementById('transStartDate').value;
    const endDate = document.getElementById('transEndDate').value;
    let url = `/api/customer/transactions?cardID=${encodeURIComponent(cardID)}`;
    if (startDate) url += `&startDate=${encodeURIComponent(startDate)}`;
    if (endDate) url += `&endDate=${encodeURIComponent(endDate)}`;
    const res = await fetch(url);
    const data = await res.json();
    const tbody = document.getElementById('transactions-tbody');
    tbody.innerHTML = '';
    if (Array.isArray(data)) {
      data.forEach(t => {
        tbody.innerHTML += `<tr>
          <td>${t.tradeDate ? t.tradeDate : ''}</td>
          <td>${t.tradeType}</td>
          <td>${t.tradeMoney}</td>
          <td>${t.cardID}</td>
          <td>${t.remark}</td>
        </tr>`;
      });
    } else {
      tbody.innerHTML = `<tr><td colspan="5">${data.msg || '无数据'}</td></tr>`;
    }
    bootstrap.Modal.getInstance(document.getElementById('transModal')).hide();
  };
  </script>
</body>
</html> 